<template>
  <a-popover position="rt" trigger="hover">
    <slot name="con"></slot>
    <template #content>
      <a-image :preview="false" width="200" height="200" fit="contain" show-loader :src="src" @click="visible = true" />
    </template>
  </a-popover>
  <a-image-preview v-if="isPre" :src="src" v-model:visible="visible" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  const props = defineProps({
    isPre: {
      type: Boolean,
      default: true,
    },
    src: {
      type: String,
    },
  })
  const visible = ref(false)
</script>

<style lang="less" scoped>
  .a-image {
    width: 200px;
    height: 200px;
  }
</style>
